<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
          <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, target-densityDpi=device-dpi" />
          <!-- 微软的老式浏览器 -->
          <meta name="MobileOptimized" content="320">
          <!-- 启用360浏览器的极速模式(webkit) – -->
          <meta name="renderer" content="webkit">
          <!-- 避免IE使用兼容模式 -->
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
          <meta name="HandheldFriendly" content="true">
          <!-- uc强制竖屏 -->
          <meta name="screen-orientation" content="portrait">
          <!-- QQ强制竖屏 -->
          <meta name="x5-orientation" content="portrait">
          <!-- UC强制全屏 -->
          <meta name="full-screen" content="yes">
          <!-- QQ强制全屏 -->
          <meta name="x5-fullscreen" content="true">
          <!-- UC应用模式 若开启长按无法复制链接-->
          <!--meta name="browsermode" content="application"-->
          <!-- QQ应用模式 -->
          <meta name="x5-page-mode" content="app">
          <!--网站开启对web app程序的支持-->
          <meta name="apple-touch-fullscreen" content="yes">
          <!--在web app应用下状态条（屏幕顶部条）的颜色-->
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <!-- windows phone 点击无高光 -->
          <meta name="msapplication-tap-highlight" content="no">
          <!--移动web页面是否自动探测电话号码-->
          <!--<meta http-equiv="x-rim-auto-match" content="none">-->
          <!--手机号码显示为拨号链接-->
          <meta name="format-detection" content="telephone=no">
          <meta http-equiv="Cache-Control" content="max-age=300" />
          <meta http-equiv="Expires" content="300" />
          <title>提现</title>
          <link rel="stylesheet" href="../css/reset.css">
          <link rel="stylesheet" href="../assets/layer_mobile/need/layer.css">
          <link rel="stylesheet" href="../css/get-money.css">
          <link rel="stylesheet"  href="../assets/swiper/css/swiper.min.css">
          <script src="../assets/layer_mobile/layer.js"></script>
          <script src="../js/jquery.min.js"></script>
          <script src="../js/common.js"></script>
          <script src="../assets/swiper/js/swiper.min.js"></script>
    </head>
    <body>
        <div class="header">
            <div class="header-box">
                <div class="bank">
                    <div class="bank-icon"><span class="icon"></span>未绑定银行卡</div>
                    <div class="wrap">
                        <!-- 绑定银行卡 -->
                        <div class="bind-card none">绑定银行卡</div>
                        <!-- 已绑定银行卡 -->
                        <div class="bind-card-on">
                            <div class="xing"><span>****</span><span>****</span><span>****</span><div class="card"><span>2258</span></div></div>
                        </div>                        
                    </div>
                </div>
            </div>
            <div class="list-item">
                <div class="list-item-box">
                    <div class="list-item-info">
                            <dt>155.00</dt>
                            <dd>投资返利余额<span>(元)</span></dd>
                        </div>
                        <div class="list-item-info">
                            <dt>155.00</dt>
                            <dd>邀请返利余额<span>(元)</span></dd>
                        </div>
                </div>
            </div>
            <div class="list-item-table">
                <div class="list-item-box">
                    <div class="list-item-info">
                        <dt><span class="icon"></span>投资返现提现</dt>
                        <dd>通过投资所获得的返利，提现单笔最低1元；</dd>
                    </div>
                    <div class="list-item-info">
                        <dt><span class="icon"></span>邀请返利提现</dt>
                        <dd>通过邀请所获得的返利，提现单笔最低50元；</dd>
                    </div>
                </div>
            </div>      
            <div class="select-list">
                <div class="select-text">选择提现余额：</div>
                <div class="select-info">
                    <input type="radio" name="radio" id="check" class="regular-checkbox" checked/><label for="check"></label>投资返利提现
                    <input type="radio" name="radio" id="check1" class="regular-checkbox"/><label for="check1"></label>邀请返利提现
                </div>
            </div> 
            <div class="number">
                <div class="numbers">提现金额<input type="text" name="" id="" placeholder="请输入提现金额"></div>
            </div>
            <div class="tips"><div class="tips-number">每天免费提现次数：<b>1</b>次</div><div class="explain"><a href="#" class="explain-popup">提现说明</a></div></div>  
            <div class="btn"><button class="ck">申请提现</button></div>
        </div>
    </body>
</html>
<script>
    $(function(){
        var pageii;
        var success;
        var error;
        var explain;
        // 提现申请弹窗
        $('.ck').click(function(){
            var content='<div class="popuo-get">'+
            '<div class="icon-close"><span class="close"></span></div>'+
            '<div class="title">提现确认</div>'+
                '<div class="tips-text">'+
                    '<ul>' +
                            '<li>提现金额：<span>88888.00</span>元</li>' +
                            '<li>提现金额：<span>88888.00</span>元</li>' +
                            '<li>到账时间：您的提现将在T+1日后到账</li>' +
                        '</ul>' +
                '</div>'+
                '<footer>' +
                    '<ul>' +
                        '<li class="btn close">取消</li>'+
                        '<li class="btn-error">确认</li>'
                        // 如果提交成功 class为btn-success 提交失败 class为btn-error
                    '</ul>' +
                '</footer>';
            '</div>';
            pageii = layer.open({
                type: 1
                ,content: content
                ,anim: 'up'
                ,className: 'popuo-sq'
            });
        })
        // 提现成功弹窗
        $('body').on('click','.btn-success',function(){
            layer.close(pageii);
            var content='<div class="success">'+
                '<div class="icon-close"><span class="close"></span></div>'+
                '<div class="icon-title"><span></span></div>'+
                '<div class="get-success">提交申请成功！</div>'+
                '<div class="get-success-tips">您的提现将在<span>T+1</span>日后到账，请注意查收！</div>'+
                '<footer>' +
                    '<ul>' +
                        '<li class="btn close">完成</li>'
                    '</ul>' +
                '</footer>';
                '</div>';
                success = layer.open({
                type: 1
                ,content: content
                ,anim: 'up'
                ,className: 'popuo-get-success'
            });               
        })
        // 提现失败弹窗
        $('body').on('click','.btn-error',function(){
            layer.close(pageii);
            var content='<div class="success">'+
                '<div class="icon-close"><span class="close"></span></div>'+
                '<div class="icon-title-error"><span></span></div>'+
                '<div class="get-success">提交申请失败！</div>'+
                '<div class="get-success-tips">您的账户出现异常，请核对后重新申请！</div>'+
                '<footer>' +
                    '<ul>' +
                        '<li class="btn close">完成</li>'
                    '</ul>' +
                '</footer>';
                '</div>';
                error = layer.open({
                type: 1
                ,content: content
                ,anim: 'up'
                ,className: 'popuo-get-success'
            });               
        })
        // 提现说明弹窗
        $('body').on('click','.explain',function(){
            var content='<div class="explains">'+
                '<div class="icon-close"><span class="close"></span></div>'+
                '<div class="title-explain">提现说明</div>'+
                '<div class="swiper-container">'+
                    '<div class="swiper-wrapper">'+
                        '<div class="swiper-slide">'+
                        '<p>1.投资返利单笔提现金额最低1元；邀请返利单笔提现最低50元。（符合提现规则的返利金额可一起提现</p>'+
                        '<p>2.国家法定节假日提现到帐时间将顺延至假期结束后的第一个工作日，部分地方性商业银行会在1-3个工作日内到账，具体提现安排以网站最新公告为准。</p>'+
                        '<p>3.用户提现时需确认银行卡姓名及预留手机号与8号金融街认证信息一致，否则将会导致提现失败。</p>'+
                        '<p>4.用户每天可享1次免费提现，超出后按单笔提现手续费1元，提现手续费将在到账金额扣除。</p>'+
                        '<p>5.如遇银行升级等特殊原因，提现金额可能会延迟到账。</p>'+                        
                        '</div>'+
                    '</div>'+
                    '<div class="swiper-scrollbar"></div>'+
                '</div>'+
                '<footer>' +
                    '<ul>' +
                        '<li class="btn close">知道了</li>'
                    '</ul>' +
                '</footer>';
                '</div>';
                explain = layer.open({
                type: 1
                ,content: content
                ,anim: 'up'
                ,className: 'popuo-explain'
            });               
        })
        // 关闭弹窗
        $('body').on('click','.close',function(){
            layer.close(pageii);
        })
        $('body').on('click','.close',function(){
            layer.close(success);
        })
        $('body').on('click','.close',function(){
            layer.close(error);
        })
        $('body').on('click','.close',function(){
            layer.close(explain);
        })
        var swiper = new Swiper('.explains>.swiper-container', {
            direction: 'vertical',
            slidesPerView: 'auto',
            freeMode: true,
            scrollbar: {
                el: '.swiper-scrollbar',
            },
            mousewheel: true,
        });
    })
</script>
